<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文档对象模型-元素之间的关系和属性方法说明(Document Object Model - Explanation of Relationships and Attribute Methods between
    Elements)</title>
  <!-- 
  在JavaScript的文档对象模型（DOM）中，元素之间的关系和属性方法是操作网页内容的重要部分。

  元素是网页的一部分。在 XML 和 HTML 中，一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含。一个典型的元素包括一个具有一些属性的开始标签，中间的文本内容和一个结束标签。
  元素和标签不是同一种概念。源代码中的标签用来标识元素的开始或结束，而元素是文档对象模型（DOM）——一个会在浏览器中显示为页面——的一部分。

  1. 元素之间的关系
  1.1. 父子关系
  - 节点（Parent Node）每个元素节点可以有一个父节点，可以通过 parentNode 属性访问。
  - 节点（Child Nodes）元素可以有多个子节点，可以通过 childNodes 属性访问所有子节点，或者使用 firstChild 和 lastChild 获取第一个和最后一个子节点。

  1.2. 兄弟关系
  - 弟节点（Sibling Nodes）同一父节点下的节点称为兄弟节点。可以通过 nextSibling 和 previousSibling 访问相邻的兄弟节点。
  - children 属性返回一个只包含元素节点的集合，便于处理不包含文本节点和注释节点的子元素。

  2. 元素的属性方法
  2.1. 获取和设置属性
  - setAttribute(name, value) 设置指定元素的属性。例如：
    const element = document.getElementById('myElement');
    element.setAttribute('class', 'myClass');
  - getAttribute(name) 获取指定元素的属性值。例如：
    const className = element.getAttribute('class');
  - removeAttribute(name) 删除指定元素的属性。例如：
    element.removeAttribute('class');
   2.2. 直接访问属性
  - 元素的某些属性可以直接通过对象的属性访问。例如：
    element.id = 'myNewId'; // 设置id属性
    const elementId = element.id; // 获取id属性
   2.3. 修改样式
  - style 属性通过 style 属性可以直接修改元素的CSS样式。例如：
    element.style.color = 'red';
    element.style.backgroundColor = 'blue';
  3. 更新元素的内容
  - innerHTML 设置或获取元素的HTML内容。例如：
    element.innerHTML = '<p>Hello World</p>';
  - textContent 设置或获取元素的文本内容，忽略HTML标签。例如：
    element.textContent = 'Hello World';
  4. 事件处理
  - 元素可以响应用户的交互事件。可以使用 addEventListener() 方法为元素添加事件监听器。例如：
    element.addEventListener('click', function() {
      alert('Element clicked!');
    });

  总结
  理解元素之间的关系和属性方法是进行DOM操作的基础。通过这些关系和方法，开发者可以动态地创建、修改和删除元素，以及更新元素的属性和样式，从而实现丰富的用户交互和动态内容展示。
   -->
</head>

<body>

  <h3>1. 元素之间的关系</h3>
  <ul class="element-relation">
    <li>父元素 (parentElement)</li>
    <li>子元素 (children)</li>
    <li>兄弟元素-前一个元素节点 (previousElementSibling)</li>
    <li>兄弟元素-后一个元素节点 (nextElementSibling)</li>
    <li>第一个子元素 (firstChild)</li>
    <li>最后一个子元素 (lastChild)</li>
  </ul>

  <h3>2. 元素的属性</h3>
  <ul class="element-attribute">
    <li>id 属性 (id)</li>
    <li>class 属性 (className)</li>
    <li>样式属性 (style)</li>
    <li>HTML内容 (innerHTML)</li>
    <li>文本内容 (textContent)</li>
  </ul>

  <h3>3. 元素的方法</h3>
  <ul class="element-method">
    <li>创建元素 (createElement)</li>
    <li>添加子元素 (appendChild)</li>
    <li>插入子元素 (insertBefore)</li>
    <li>删除子元素 (removeChild)</li>
    <li>替换子元素 (replaceChild)</li>
    <li>添加事件监听器 (addEventListener)</li>
  </ul>

  <script>
    // 1. 元素之间的关系
    const elementRelation = document.querySelector('.element-relation');
    console.log("元素之间的关系", elementRelation.children[0].parentElement); // 父元素
    console.log("元素之间的关系", elementRelation.children); // 子元素
    console.log("元素之间的关系", elementRelation.previousElementSibling); // 前一个兄弟元素
    console.log("元素之间的关系", elementRelation.nextElementSibling); // 后一个兄弟元素
    console.log("元素之间的关系", elementRelation.firstChild); // 第一个子元素节点

    // 2. 元素的属性
    const elementAttribute = document.querySelector('.element-attribute');
    console.log("元素的属性", elementAttribute.id); // id 属性
    console.log("元素的属性", elementAttribute.className); // class 属性
    console.log("元素的属性", elementAttribute.style); // 样式属性
    console.log("元素的属性", elementAttribute.innerHTML); // HTML内容
    console.log("元素的属性", elementAttribute.textContent); // 文本内容

    // 3. 元素的操作
    const elementOperation = document.querySelector('.element-operation');
    console.log("元素的操作", elementOperation.appendChild(document.createElement('li'))); // 添加子元素 (appendChild)
    console.log("元素的操作", elementOperation.insertBefore(document.createElement('li'), elementOperation.children[0])); // 插入子元素 (insertBefore)
    console.log("元素的操作", elementOperation.removeChild(elementOperation.children[0])); // 删除子元素 (removeChild)
    console.log("元素的操作", elementOperation.replaceChild(document.createElement('li'), elementOperation.children[0])); // 替换子元素 (replaceChild)
    console.log("元素的操作", elementOperation.cloneNode(true)); // 克隆元素 (cloneNode)
    console.log("元素的操作", elementOperation.parentNode); // 父元素 (parentNode)
    console.log("元素的操作", elementOperation.nextSibling); // 后一个兄弟元素 (nextSibling)
    console.log("元素的操作", elementOperation.previousSibling); // 前一个兄弟元素 (previousSibling)
    console.log("元素的操作", elementOperation.children); // 子元素 (children)
    console.log("元素的操作", elementOperation.childNodes); // 子节点 (childNodes)
    console.log("元素的操作", elementOperation.firstElementChild); // 第一个子元素 (firstElementChild)
    console.log("元素的操作", elementOperation.lastElementChild); // 最后一个子元素 (lastElementChild)
    console.log("元素的操作", elementOperation.nextElementSibling); // 下一个兄弟元素 (nextElementSibling)
    console.log("元素的操作", elementOperation.previousElementSibling); // 上一个兄弟元素 (previousElementSibling)
    console.log("元素的操作", elementOperation.parentElement); // 父元素 (parentElement)
    console.log("元素的操作", elementOperation.firstChild); // 第一个子节点 (firstChild)
    console.log("元素的操作", elementOperation.lastChild); // 最后一个子节点 (lastChild)
    console.log("元素的操作", elementOperation.textContent); // 元素文本内容 (textContent)

  </script>

</body>

</html>